<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes">

<title>Highcharts Example</title>
<link id="bootstrapCss" rel="stylesheet"
	href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="${base}/plugins/plot.css">
<link rel="stylesheet" type="text/css" href="${base}/plugins/jquery.datetimepicker.css">
<style type="text/css">
body{width:100%;height:100%;}
.container{width:100%;height:100%;padding:0px;}
.col-xs-12{padding:8px;}
</style>
<script type="text/javascript">
var base = '${base}';
var id = '${id}';
var type = '${type}';
var uid = '${uid}';
var getDataUrl =base + "/getDataForHiChart";
var showdata = false;
</script>
</head>
<body>

	<div class="container">
		<div class="col-xs-2" style="display: none;">
				<h3>检测仪列表</h3>
				<ul id="ul-tester" class="list-group">
				</ul>
		</div>
		<div class="col-xs-12">
			<div class="row" style="height: 50px;">
				<button class="btn btn-primary col-xs-2" onclick="reloadData()">刷新</button>
				<button class="btn btn-default" onclick="click_showDataList()">显示数据</button>
				<div class="btn-group col-xs-1" style="width: 130px;">
					<button id="drop-type" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
						<span class="hide" data="value">pm25in</span><span data="show">PM2.5室内</span> <span class="caret"></span>
					</button>
					<ul id="ul-type" class="dropdown-menu" role="menu">
						<li><a href="javascript:void(0);"><span class="hide" data="value">pm25in</span><span data="show">PM2.5室内</span></a></li>
						<li><a href="javascript:void(0);"><span class="hide" data="value">pm25out</span><span data="show">PM2.5室外</span></a></li>
						<li><a href="javascript:void(0);"><span class="hide" data="value">wendu1</span><span data="show">室内进风温度</span></a></li>
						<li><a href="javascript:void(0);"><span class="hide" data="value">wendu2</span><span data="show">室内出风温度</span></a></li>
						<li><a href="javascript:void(0);"><span class="hide" data="value">wendu3</span><span data="show">室外进风温度</span></a></li>
						<li><a href="javascript:void(0);"><span class="hide" data="value">wendu4</span><span data="show">室外出风温度</span></a></li>
						<li><a href="javascript:void(0);"><span class="hide" data="value">shidu</span><span data="show">湿度</span></a></li>
						<li><a href="javascript:void(0);"><span class="hide" data="value">co2</span><span data="show">CO2</span></a></li>
						<li><a href="javascript:void(0);"><span class="hide" data="value">jiaquan</span><span data="show">甲醛</span></a></li>
						<li style="display: none;"><a href="javascript:void(0);"><span class="hide" data="value">tvoc</span><span
								data="show">TVOC</span>(异味指数)</a></li>
						<li class="nova" style="display: none;"><a href="javascript:void(0);"><span class="hide" data="value">pm10</span><span
								data="show">PM10</span></a></li>
					</ul>
				</div>
				<div class="btn-group col-xs-1" style="width: 90px;">
					<button id="drop-time" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
						<span class="hide" data="value">24</span><span data="show">24h</span> <span class="caret"></span>
					</button>
					<ul id="ul-time" class="dropdown-menu" role="menu">
						<li><a href="javascript:void(0);"><span class="hide" data="value">24</span><span data="show">24h</span></a></li>
						<li><a href="javascript:void(0);"><span class="hide" data="value">1</span><span data="show">1h</span></a></li>
						<li><a href="javascript:void(0);"><span class="hide" data="value">0</span><span data="show">自定义</span></a></li>
					</ul>
				</div>
				<div id="dtpicker-time" class="col-xs-6 hide" style="width: 380px;">
					<input id="startDate" type="text" style="width: 120px;"> <span>至</span> <input id="endDate" type="text"
						style="width: 120px;">
					<button class="btn btn-default" onclick="click_showHist()">查看</button>
					
				</div>
				</div>
				<div  class="row">
				<div class="col-xs-12" data-highcharts-chart="0">
					 <div class="col-xs-4" id="datalist" style="display: none;">
						<table style="text-align: center;">
							<thead>
								<tr>
									<th colspan="2" style="text-align: center;">数据清单</th>
								</tr>
								<tr>
									<th>时间</th>
									<th nowrap="nowrap">数值</th>
								</tr>
							</thead>
							<tbody id="showdatainfo">
							</tbody>
						</table>
					</div> 
				</div>
				<div class="col-xs-12" data-highcharts-chart="0">
					<div id="chart" class="col-xs-12" data-highcharts-chart="0"></div>
				</div>
				
			</div>
		</div>

	</div>
	<script id="jquery" type="text/javascript" src="${base}/plugins/jquery.js"></script>
	<script type="text/javascript" src="${base}/plugins/loadScripts.js"></script>
	<script type="text/javascript" src="${base}/plugins/jquery.datetimepicker.js"></script>	
	<script id="bootstrapJs" type="text/javascript" src="${base}/plugins/bootstrap.min.js"></script>
	<script id="high" type="text/javascript" src="${base}/plugins/highcharts.js"></script>
	<script type="text/javascript" src="${base}/plugins/exporting.js"></script>
	<script type="text/javascript" src="${base}/plugins/export-csv.js"></script>
	
	<script type="text/javascript" src="${base}/plugins/plot2.js"></script>
	<script type="text/javascript" src="${base}/plugins/nova.js"></script>
	
		<script type="text/javascript">
            var userInfo;
            var selSn;
                $(document).ready(function(){
                    //var uid=getQueryString("uid");
                    selSn=getQueryString("sn");
                   // getLimitedUserInfo(uid,init2);
                   // getLogginInfo(init3);
                    loadJS('${base}/plugins/jquery.datetimepicker.js',function(){
                        $("#startDate").datetimepicker({lang:'ch'});
                        $("#endDate").datetimepicker({lang:'ch'});
                        var d = new Date();
                        var dd = d.getFullYear()+"/"+(d.getMonth()+1)+"/"+d.getDate();
                        var min = d.getMinutes();
                        if (min<10) {
                            min="0"+min;
                        }
                        var dt = d.getHours()+":"+min;
                        $("#startDate").val(dd+" 00:00");
                        $("#endDate").val(dd+" "+dt);
                    });
                    $("#ul-time li").click(function(){
                        var v = $(this).find("span[data='value']").text();
                        var s = $(this).find("span[data='show']").text();
                        if (v!=$("#drop-time span[data='value']").text()) {
                            $("#drop-time span[data='value']").text(v);
                            $("#drop-time span[data='show']").text(s);
                            if (v==0) {
                                $("#dtpicker-time").removeClass('hide');
                                showType='hist';
                            }else{
                                $("#dtpicker-time").addClass('hide');
                                showType=s;
                                clearSeries();
                                loadHoursDataOfAll(v);
                            }
                        }
                    });
                    $("#ul-type li").click(function(){
                        var v = $(this).find("span[data='value']").text();
                        var s = $(this).find("span[data='show']").text();
                        if (chngDataType(v)) {
                            $("#drop-type span[data='value']").text(v);
                            $("#drop-type span[data='show']").text(s);
                            reloadData();
                        }
                    });
                });
            function init2(resp){
                if (resp.status=='ok') {
                    var curu=resp.result[0];
                    $("#cur-user span[data='id']").text(curu.id);
                    $("#cur-user span[data='name']").text(curu.name);
                    if(curu.showDataType){
                        var dt = parseInt(curu.showDataType);
                        for(var i=0;i<6;i++){
                            if(dt&(1<<i)){
                                $("#ul-type li:eq("+i+")").show();
                            }else{
                                $("#ul-type li:eq("+i+")").hide();
                            }
                        }
                    }
                }
            }
            function init3(r){
                if (r.status=='ok') {
                    userInfo = r.result[0];
                    //var uid=getQueryString("uid");
                    var type=getQueryString("type");
                    //loadJSById('high','/lib/highcharts/highcharts.js',function(){
                        if (userInfo.role=='admin'||userInfo.role=='vip') {
                           // loadJSById('highExp','${base}/plugins/exporting.js',function(){
                             //   loadJS('/lib/nova/export-csv.js',function(){
                              //      initHighchart();
                              //      findTesters(uid,function(lst){
                                //        if (chngDataType(type)) {
                                //            $("#drop-type span[data='value']").text(type);
                                //            $("#drop-type span[data='show']").text(getDataTypeName(type));
                                 //       }
                                 //       showTesters(lst);
                                 //       setTimeout(function(){loadDataOfAll();},500);
                                 //   });
                               // });
                           // });
                        }else{
                            initHighchart();
                            findTesters(uid,function(lst){
                                showTesters(lst);
                                if (chngDataType(type)) {
                                    $("#drop-type span[data='value']").text(type);
                                    $("#drop-type span[data='show']").text(getDataTypeName(type));
                                }
                                setTimeout(function(){loadDataOfAll();},500);
                            });
                        }
                        if (userInfo.name=='nova') {
                            $(".nova").show();
                        }else{
                            $(".nova").hide();
                        }
                    //});
                }
            }
            
            $(function(e){
            	initHighchart();
            	// var type=getQueryString("type");
            	 
            	 // var uid=getQueryString("uid");
            	 
            	 findTesters(uid,function(lst){
                     showTesters(lst);
                     if (chngDataType(type)) {
                         $("#drop-type span[data='value']").text(type);
                         $("#drop-type span[data='show']").text(getDataTypeName(type));
                     }
                     setTimeout(function(){loadDataOfAll();},500);
                 },id);
            })
            
           	function click_showDataList(){
            	if(!showdata){
	            	$("#datalist").show();
	            	//$("#chart").css("padding-left",'100')
	            	showdata = true;
            	}else{
            		$("#datalist").hide();
            		//$("#chart").css("padding-left",'0')
	            	showdata = false;
            	}
            }
	</script>

</body>
</html>
